<template>
    <section class="court-list">
        <tab :line-width=2 active-color='#fc378c' :index.sync="selectIndex">
            <tab-item class="vux-center" :selected="court.sportType==selectType" v-for="court in courts">{{sportType[court.sportType]}}</tab-item>
        </tab>
        <swiper :index.sync="selectIndex" height="100px" :show-dots="false">
            <swiper-item class="court-detail" v-for="court in courts">
                <flexbox>
                    <flexbox-item>
                        <x-button type="primary" @click="onBooking(court.id)">{{sportType[court.sportType]}}预定</x-button>
                    </flexbox-item>
                    <flexbox-item>
                        <x-button type="warn" @click="onBlockBooking(court.id)">{{sportType[court.sportType]}}包场</x-button>
                    </flexbox-item>
                </flexbox>
            </swiper-item>
        </swiper>
    </section>
</template>
<script>
import XButton from 'vuxComponents/x-button';
import Swiper from 'vuxComponents/swiper';
import SwiperItem from 'vuxComponents/swiper-item';
import {
    Tab,
    TabItem
} from 'vuxComponents/tab';
import {
    Flexbox,
    FlexboxItem
} from 'vuxComponents/flexbox';
import {
    sportTypeEnum
}
from '../enum';
import {
    go
} from '../libs/router';
export default {
    components: {
        Tab,
        TabItem,
        XButton,
        Flexbox,
        FlexboxItem,
        Swiper,
        SwiperItem,
    },
    props: {
        courts: Array,
        selectType: {
            type: Number
        }
    },
    created() {
        console.log(this);
    },
    data() {
        return {
            selectIndex: 0,
            sportType: sportTypeEnum
        }
    },
    methods: {
        onBooking(courtId) {
            go({
                name: "booking",
                params: {
                    bookingtype: "0",
                    courtid: courtId
                }
            }, this.$router);
        },
        onBlockBooking(courtId) {
            go({
                name: "booking",
                params: {
                    bookingtype: "1",
                    courtid: courtId
                }
            }, this.$router);
        }
    }
}
</script>
<style lang="sass" scoped>
.court-list {
    .court-detail {
        padding: 30px 15px 0px 15px;
        box-sizing: border-box;
    }
}
</style>
